<template>
  <el-container class="main_con">
    <!-- <div ref="copyDom"> -->
    <div class="filter_con ds_block">
      <div class="button_area"><el-button v-has type="primary" size="medium" @click="addMerchant">新增商户</el-button></div>
      <div class="filter_area">
        <el-input class="serach_input mr_15 mt_15" size="medium" v-model="obj.name" placeholder="商户名称"></el-input>
        <el-input class="serach_input mr_15 mt_15" size="medium" v-model="obj.mobile" placeholder="手机号码"></el-input>
        <el-input class="serach_input mr_15 mt_15" size="medium" v-model="obj.company" placeholder="公司名称"></el-input>
        <label class="mr_15 mt_15">状态</label>
        <el-select size="medium" v-model="obj.status" placeholder="请选择" class="mr_15 mt_15">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <label class="mr_15 mt_15">创建时间</label>
        <date-picker size="medium" @change="getTime" class="mr_15 mt_15"></date-picker>
        <el-button class="mr_15 mt_15" @click="searchList" size="medium">搜索</el-button>
      </div>
    </div>
    <!-- <img src="http://jingzhe.com/storage/madmin/20201105/1246a61e2bbf1408358ba6101f223038.jpg"> -->
    <div class="list_con">
      <el-table @selection-change="selectItem" :data="list" element-loading-text="" fit highlight-current-row>
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="name" label="商户名称"></el-table-column>
        <el-table-column prop="company" label="公司"></el-table-column>
        <el-table-column prop="mobile" label="手机号码"></el-table-column>
        <el-table-column prop="status_text" label="状态"></el-table-column>
        <el-table-column prop="district,address" label="商户地址">
          <template slot-scope="scope">
            {{ scope.row.district }},{{ scope.row.address }}
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间"></el-table-column>
        <el-table-column label="操作" width="270">
          <template slot-scope="scope">
            <el-button v-has type="text" @click="loginmerchant(scope.row.id)">登录</el-button>
            <el-popover style="margin-left: 10px;" placement="bottom" width="224" trigger="hover" content="">
              <vue-qr :text="merchanturl + scope.row.id" :size="200"></vue-qr>
              <el-button @click="doCopy(merchanturl + scope.row.id+'&&mall_id='+scope.row.mall_id)" type="text">复制链接</el-button>
              <el-button type="text" slot="reference">预览</el-button>
            </el-popover>
            <el-button style="margin-left: 10px;" v-has type="text" @click="editItem(scope.row)">编辑</el-button>
            <el-button v-has type="text" @click="EnableHandle(scope.row)">{{ scope.row.status == 1 ? '禁用' : '启用' }}</el-button>
            <el-button v-has type="text" @click="showpass(scope.row)">初始账号</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table_footer" v-show="total != 0">
        <!-- <el-button @click="delMul" size="medium">批量删除</el-button> -->
        <el-pagination @current-change="changePage" class="pages" background hide-on-single-page layout="prev, pager, next" :total="total"></el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="showpassword" width="600px">
      <div class="ps_div">
        <el-form label-width="100px">
          <el-form-item label="初始账号">
            <span>{{ secret.username }}</span>
          </el-form-item>
          <el-form-item label="初始密码">
            <span>{{ secret.password }}</span>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="showpassword = false">取 消</el-button>
        <el-button type="primary" @click="doCopypass">复制</el-button>
      </div>
    </el-dialog>
    <!-- </div> -->
    <!-- <img :src="image"> -->
  </el-container>
</template>

<script>
import DatePicker from '@/components/DatePicker/index';
import html2canvas from 'html2canvas';
import {getBase64} from '@/utils/index';
import {getMerchantList, editMerchant, delMerchant} from '@/api/mall/merchant';
import {shop_login} from '@/api/common';
import {getMallToken, setMallToken, getToken, setToken} from '@/utils/auth';

import vueQr from 'vue-qr';
export default {
  data() {
    return {
      url: process.env.VUE_APP_BASE_API,
      image: '',
      merchanturl: window.location.origin + '/h5/#/pages/merchant/merchant?id=',
      options: [
        {
          value: '',
          label: '全部'
        },
        {
          value: '1',
          label: '正常'
        },
        {
          value: '2',
          label: '禁用'
        },
        {
          value: '0',
          label: '未启用'
        }
      ],
      obj: {
        name: '',
        mobile: '',
        company: '',
        status: '',
        begin_date: '',
        end_date: ''
      },
      objTemp: {},
      total: 0,
      page: 1,
      size: 10,
      isLoading: false,
      list: [],
      listSelected: [],
      secret: {},
      showpassword: false
    };
  },
  components: {
    DatePicker,
    vueQr
  },
  mounted() {
    this.searchList();
  },
  methods: {
    EnableHandle(data) {
      let _this = this;
      let status = Number(data.status != 1);
      this.$confirm(status ? '确认启用？' : '确认禁用？')
        .then(_ => {
          let params = data;
          params.status = status;
          editMerchant(params).then(res => {
            _this.getDataList();
          });
        })
        .catch(_ => {});
    },
    showpass(item) {
      this.secret = {
        username: item.username,
        password: item.password
      };
      this.showpassword = true;
    },
    doCopypass() {
      let data = '初始登录账号：' + this.secret.username + ',初始登录密码：' + this.secret.password;
      this.$copyText(data).then(
        res => {
          //this.$alert('复制成功');
          this.$message({
            message: '复制成功',
            type: 'success',
            duration: 2000
          });
        },
        error => {
          this.$alert('无法复制');
        }
      );
    },
    doCopy(orderNo) {
      this.$copyText(orderNo).then(
        res => {
          //this.$alert('复制成功');
          this.$message({
            message: '复制成功',
            type: 'success',
            duration: 2000
          });
        },
        error => {
          this.$alert('无法复制');
        }
      );
    },
    loginmerchant(id) {
      let type = localStorage.getItem('login_type');
      this.$store
        .dispatch('user/silent_login', {id: id, type: type + '_shop'})
        .then(() => {
          window.location.href = '/shop.html';
        })
        .catch(() => {});
    },
    //新增商户
    addMerchant() {
      //导航到新页面
      this.$router.push('/merchant/item');
    },
    //获取时间
    getTime(value) {
      this.obj.begin_date = value[0];
      this.obj.end_date = value[1];
    },
    //查询数据
    searchList() {
      //复制查询对象
      this.objTemp = Object.assign({}, this.obj);
      this.getDataList();
    },
    //查询数据本体
    getDataList() {
      this.isLoading = true;
      getMerchantList(this.objTemp, this.page, this.size).then(res => {
        this.isLoading = false;
        let o = res.msg;
        this.list = o.data;
        this.total = o.total;
      });
    },
    //编辑数据
    editItem(obj) {
      this.$router.push({path: '/merchant/item', query: {id: obj.id}});
    },
    //删除数据
    delItem(id) {
      this.$confirm('是否要删除该条数据？')
        .then(_ => {
          this.isLoading = true;
          delMerchant(id).then(res => {
            this.isLoading = false;
            //重新加载数据
            this.getDataList();
          });
        })
        .catch(_ => {
          //出错
        });
    },
    //选择记录
    selectItem(selection) {
      this.listSelected = selection;
    },
    //批量删除商户
    delMul() {
      this.$alert('功能暂未开发!');
    },
    //切换分页
    changePage(page) {
      this.page = page;
      this.getDataList();
    }
  }
};
</script>

<style lang="scss" scoped></style>
